import React, { ReactNode } from 'react'
import { TouchableWithoutFeedbackProps, StyleSheet, Text, View, GestureResponderEvent, Animated, Easing, PixelRatio, TextStyle, ViewStyle, TouchableOpacity } from 'react-native'

interface Props extends TouchableWithoutFeedbackProps{
  style?: ViewStyle;
  textStyle?: TextStyle;
  type: 'default' | 'primary' | 'warn' | 'danger';
}
interface State{
  pressIn: boolean;
  fadeOpAn: Animated.Value;
  fadeScaleAn: Animated.Value;
  left: number;
  top: number;
}

export default class LinButton extends React.Component<Props, State> {
  public static defaultProps = {
    type: 'primary'
  }

  public constructor (props: Props) {
    super(props)
    this.state = {
      pressIn: false,
      fadeOpAn: new Animated.Value(0),
      fadeScaleAn: new Animated.Value(0),
      left: 0,
      top: 0
    }
  }

  public _onPressIn (...args: [GestureResponderEvent]): void {
    const left = args[0].nativeEvent.locationX / PixelRatio.get()
    const top = args[0].nativeEvent.locationY / PixelRatio.get()
    this.setState({
      pressIn: true,
      left,
      top
    })
    Animated.timing(
      this.state.fadeOpAn,
      {
        toValue: 0.3,
        duration: 0
      }
    ).start()
    Animated.timing(
      this.state.fadeScaleAn,
      {
        toValue: 0.01,
        duration: 0
      }
    ).start()
    if (this.props.onPressIn) {
      this.props.onPressIn(args[0])
    }
  }

  public _onPressOut (...args: [GestureResponderEvent]): void {
    this.setState({
      pressIn: false
    })
    Animated.parallel([
      Animated.timing(
        this.state.fadeOpAn,
        {
          toValue: 0,
          duration: 2000
          // easing: Easing.linear
          // speed: 0.0001,
        }
      ),
      Animated.timing(
        this.state.fadeScaleAn,
        {
          toValue: 20,
          duration: 2000,
          easing: Easing.linear
        }
      )
    ]).start()
    if (this.props.onPressOut) {
      this.props.onPressOut(args[0])
    }
  }

  public render (): ReactNode {
    const propStyle = this.props.style
    return (<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
      {(
        React.createElement(
          TouchableOpacity,
          // { underlayColor: propStyle &&  propStyle.backgroundColor || '#eee', activeOpacity: 0.8, ...this.props, onPressIn: this._onPressIn.bind(this), onPressOut: this._onPressOut.bind(this), ...{style: [styles.button, styles[this.props.type] ,propStyle]}, },
          {
            activeOpacity: 0.8,
            ...this.props,
            onPressIn: this._onPressIn.bind(this),
            onPressOut: this._onPressOut.bind(this),
            ...{ style: [styles.button, styles[this.props.type], propStyle] }
          },
          (
            <View >
              <Animated.View style={[styles.animate_view, { transform: [{ scale: this.state.fadeScaleAn }], opacity: this.state.fadeOpAn, left: this.state.left, top: this.state.top }]}></Animated.View>
              <Text style={[{
                color: '#fff',
                marginHorizontal: 20,
                fontSize: 14,
                textAlign: 'center',
                textAlignVertical: 'center'
              }, this.props.textStyle]}>
                {this.props.children}
              </Text>
            </View>)
        )
      )}
    </View>
    )
  }
}

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#7fa2ff',
    borderRadius: 15,
    overflow: 'hidden',
    height: 25,
    justifyContent: 'center',
    position: 'relative',
    // opacity: 0.9,
    flex: 0
  },
  primary: {
    backgroundColor: '#7fa2ff'
  },
  primary_text: {
    color: '#fff'
  },
  warn: {
    backgroundColor: '#ffd251'
  },
  warn_text: {
    color: '#fff'
  },
  danger: {
    backgroundColor: '#ee8573'
  },
  danger_text: {
    color: '#fff'
  },
  default: {
    backgroundColor: 'gray'
  },
  default_text: {
    color: '#fff'
  },
  button_pressin: {

  },
  animate_view: {
    position: 'absolute',
    // top: '50%',
    // left: '50%',
    height: 50,
    width: 50,
    borderRadius: 50,
    backgroundColor: '#000'
    // marginTop: -10,
  }
})
